import React, { Fragment } from 'react';
import { connect } from 'dva';
import router from 'umi/router';
import { Modal,Row,Col,Radio } from 'antd';
import styles from './tempModal.less';

const RadioGroup = Radio.Group;
export default class TemplateModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible:false,
      specificationsType: 1, 
      detailType:1,   
    };        
  }
  componentDidMount() {
    const { onRef } = this.props;
    onRef(this); 
    window.Isoption = true;  
  }

  componentWillMount() {
    window.Isoption = false;
  }

  showModal = () => {
    this.setState({
        visible:true
    })
  };

  hideModal = () => {
    this.setState({
        visible:false
    })
  }

  onChangeSpecifications = (e) => {    
    this.setState({
        specificationsType: e.target.value,
    });
  }

  onChangeDetail = (e) => {    
    this.setState({
        detailType: e.target.value,
    });
  }

  comfirm = () => {
    const { specificationsType, detailType } = this.state;
    router.push(`/${window.storeId}/goods/detailtemplates/add/${specificationsType}/${detailType}`)
  }

  render() {    
    const { templateList,cdnUrl } = this.props;  
    const { visible } = this.state;
    return (
      <Modal
        title={'选择模板样式'}
        centered
        width={640}
        visible={visible}
        onCancel={this.hideModal}
        onOk={this.comfirm}
      >  
        <Row className="xkd-mb16 xkd-text-center">
            <Col span={4}>                
                <div className={styles.lineHeight80}>基本信息</div>
            </Col>
            <Col span={18}>
                <Row gutter={16}>
                    <Col span={12} style={{textAlign:'center'}}>
                        <img src={`${cdnUrl}/xkdnewyun/systemfile/store/baseInfo_style1.png`} className="xkd-width-per-100" style={{width:200}}/>
                    </Col>
                    <Col span={12} style={{textAlign:'center'}}>
                        <img src={`${cdnUrl}/xkdnewyun/systemfile/store/baseInfo_style2.png`} className="xkd-width-per-100" style={{width:200}}/>
                    </Col>
                </Row>   
                <RadioGroup onChange={this.onChangeDetail} value={this.state.detailType} className={styles.RadioGroup}>
                    <Row>
                        <Col span={12}>
                            <Radio value={1}>样式一</Radio>            
                        </Col>
                        <Col span={12}>               
                            <Radio value={2}>样式二</Radio>  
                        </Col>
                    </Row>         
                </RadioGroup>
            </Col>
        </Row>
        <Row className="xkd-text-center">
            <Col span={4}>
                <div className={styles.lineHeight80}>商品规格</div>
            </Col>
            <Col span={18}>
                <Row gutter={16}>
                    <Col span={12} style={{textAlign:'center'}}>
                        <img src={`${cdnUrl}/xkdnewyun/systemfile/store/sku_style1.png`} className="xkd-width-per-100" style={{width:200}}/>
                    </Col>
                    <Col span={12} style={{textAlign:'center'}}>
                        <img src={`${cdnUrl}/xkdnewyun/systemfile/store/sku_style2.png`} className="xkd-width-per-100" style={{width:200}}/>
                    </Col>
                </Row> 
                <RadioGroup onChange={this.onChangeSpecifications} value={this.state.specificationsType} className={styles.RadioGroup}>
                    <Row>
                        <Col span={12}>
                            <Radio value={1}>折叠版</Radio>            
                        </Col>
                        <Col span={12}>               
                            <Radio value={2}>展开版</Radio>  
                        </Col>
                    </Row>         
                </RadioGroup>
            </Col>
        </Row>        
      </Modal>
    );
  }
}
